<template>
    <div>
        <NavBar :title="title"></NavBar>

        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />

        <van-tabs v-model:active="active" animated>
            <van-tab title="推荐">

                <Swipe :images="images"></Swipe>

                <van-grid>
                    <van-grid-item text="全球直采" />
                    <van-grid-item text="正品保障" />
                    <van-grid-item text="售后无忧" />
                    <van-grid-item text="假一赔十" />
                </van-grid>

                <div style="width: 100%; height: 80px;">
                    <img src="../../image/1.png" alt="" style="width: 100%; height: 80px;">
                </div>


                <div>限时购 <span style="background: black; color: aliceblue;">35</span>: <span
                        style="background: black; color: aliceblue;">19</span> : <span
                        style="background: black; color: aliceblue;">55</span> 每天10点 限时限量</div>

                <div>
                    <img src="../../image/2.png" alt="" style="width: 100%; height: 70px;">
                </div>

                <div>
                    <img src="../../image/3.png" alt="" style="width: 100%; height: 110px;">
                </div>

            </van-tab>
            <van-tab title="美食">内容 2</van-tab>
            <van-tab title="运动">内容 3</van-tab>
            <van-tab title="保健品">内容 4</van-tab>
            <van-tab title="内衣">内容 3</van-tab>
            <van-tab title="更多">内容 4</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import Swipe from '@/components/Swipe.vue';
let title = '首页'
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
];
</script>

<style lang="scss" scoped></style>